import React, {Component} from "react";
import "./App.less";
import {Provider} from "mobx-react";
import Store from "./stores";
import Router from "./pages/Router";
import LoginModal from "./components/loginModal";
import $ from "jquery";
// console.log(window.devicePixelRatio);
// alert(window.innerWidth);
(function (doc, win) {
    var docEl = doc.documentElement;
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var recalc = function () {
        var clientWidth = window.screen.availWidth;
        // var device = window.devicePixelRatio;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
    };

    var getStyle = (obj, attr) => {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, "false")[attr];
        }
    }
    let minWidth = $("#root").width() * 0.8;
    $("#root").css({"min-width": minWidth});
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
}(document, window));

class App extends Component {

    render() {
        return (
            <Provider {...Store} className="App">
                <Router/>
                <LoginModal/>
            </Provider>
        );
    }
}

export default App;
